<template>
  <div class="add" style="position: fixed; top: 0; width: 100%; height: 2000px; background: whitesmoke">
    <div style="width: 100%;height: 55px;background: white;display: flex" @click="fanhui">
      <div style="font-family: 'Avenir';font-size: 20px;margin: 13px 0 0 15px"><van-icon name="arrow-left" /></div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 12px 0 0 130px">我的反馈</div>
    </div>

    <div class="big">
      <div class="one">
        <div class="one1">反馈内容</div>
        <div class="one2">{{this.feedback.feebackTime}}</div>
      </div>
      <div class="tow">
        <div class="tow1" >
                  <p style="display: flex" v-if="this.feedback.questionType==1">【APP建议】 {{this.feedback.feedbackContent}}</p>
                  <p style="display: flex" v-if="this.feedback.questionType==2">【活动建议】 {{this.feedback.feedbackContent}}</p>
                  <p style="display: flex" v-if="this.feedback.questionType==3">【其他】 {{this.feedback.feedbackContent}}</p>
<!--          忘了是怎么开始，也许就是对你，有一种感觉，忽然间发现自己，已深深爱上你，你真的很简单，爱的地暗天黑都已无所谓，是是非非无法抉择无偶，没有为爱日夜去跟随，那个疯狂的人是我。-->
        </div>
        <div class="tow2">
          <van-image v-for="(imageUrl, index) in feedback.imgsList" :key="index" :src="imageUrl" width="100px" height="100px" class="image-item" />

        </div>
      </div>
      <div class="three">
        <div class="one">
          <div class="one3">客服回复</div>
          <div class="one4">{{ this.feedback.processingTime }}</div>
        </div>
        <div class="three1">
          {{ this.feedback.huiContent }}
        </div>
      </div>

      <van-button class="four" @click="supplemental" >补充反馈</van-button>

    </div>


  </div>
</template>

<script>

import {selectByRegisterIp} from "@/api/SetUp/feedback/feedback";


export default {
  data() {
    return {
      feedback:{},
      user: JSON.parse(localStorage.getItem('login')),
    };
  },
  created() {
    this.findFeedback()
  },
  methods: {
    findFeedback() {
      selectByRegisterIp(this.user.registerIp).then(row => {
        if(row!=null){
          this.feedback=row.data;
        }else{
          this.$toast('暂无反馈');
        }
        console.log(this.feedback)
      })
    },
    supplemental(){
      this.$router.push({path:"/supplemental",query:{id:this.feedback.id}})
    },
    fanhui() {
      this.$router.push('/feedback')
    },
  }
}

</script>

<style scoped>
.big{
  width: 95%;
  height: 540px;
  background: white;
  margin: 12px 0 0 11px;

}
.one{
  width: 100%;
  height: 50px;
  display: flex;
}
.one1{
  width: 60%;
  height: 50px;
  display: flex;
  line-height: 50px;
  margin-left: 10px;
  font-size: 17px;
}
.one2{
  width: 40%;
  height: 50px;
  display: flex;
  line-height: 50px;
  font-size: 14px;
  color: #c4c4c4;
}
.tow{
  width: 92%;
  height: 250px;
  margin-left: 16px;
}
.tow1{
  width: 100%;
  height: 150px;
  display: flex;
}
.tow2{
  width: 100%;
  height: 100px;
  display: flex;
}
.three{
  width: 95%;
  height:150px;
  border-top: whitesmoke 2px solid;
  margin-left: 10px;

}
.three1{
  width: 95%;
  height: 100px;
  display: flex;
  margin-left: 10px;
  font-size: 14px;
}
.four{
  margin-top: 20px;
  width: 80%;
  height: 50px;
  border: #51b8ff 1px solid;
  color: #51b8ff;
  font-size: 20px;
  border-radius: 90px;
}
.one3{
  width: 60%;
  height: 50px;
  display: flex;
  line-height: 50px;
  margin-left: 10px;
  font-size: 17px;
}
.one4{
  width: 40%;
  height: 50px;
  display: flex;
  line-height: 50px;
  font-size: 14px;
  color: #c4c4c4;
}
.image-item{
  margin-top: -20px;
  margin-left: 10px;
}
</style>
